<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="选择创意分类模板" :visible.sync="dialogVisible" @close="resetForm()" width="400px">
        <div class="length_tips">还可以添加<el-link type="danger" :underline="false">{{length}}</el-link>个模板</div>
        <div> <el-input placeholder="请输入搜索内容"  size="mini" v-model="queryInfo.query"  @input="handleInput" clearable></el-input></div>
        <div class="model_list" :infinite-scroll-distance="30" v-infinite-scroll="load" :infinite-scroll-disabled="isload">
            <div class="model_item flexbox flexcenter flexbetween" v-for="(item,index) in model_list" :key="index">
                <el-checkbox v-model="item.check" @change="checkModelLength">{{item.name}}</el-checkbox>
                <div class="yusuan_edit flexbox flexcenter">
                    <!-- <span class="icon_btn"><img src="../../assets/img/edit_icon.svg" alt=""></span> -->
                    <span class="icon_btn" @click="deletModel(item.id,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" :loading="loading" class="el-button-width">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            isload:false,
            length: 0,
            model_list: [],
            queryInfo:{
                page:1,
                limit:10,
                type:5,
                query:''
            }
        };
    },
    created() {
        this.$bus.on("industryModel", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.length = 10 - this.$parent.createform.industry_list.length
            this.getAudienceModel();
        });
    },
    beforeDestroy() {
        this.$bus.off("industryModel");
    },
    methods: {
        // 输入事件处理函数，使用防抖
        handleInput() {
            this.queryInfo.page = 1
            this.model_list = []
            this.getAudienceModel();
        },
        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.queryInfo.page = 1
            this.queryInfo.query = ''
            this.model_list = []
        },

        // // 下拉加载更多
        load() {
            this.queryInfo.page += 1
            this.getAudienceModel();
        },

        // 获取预算模板
        async getAudienceModel() {
            this.isload = true
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_model",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                if(res.data.length<=0){
                    this.isload = true
                }else{
                    this.isload = false
                }
                for (let i in res.data) {
                    res.data[i].check = false;
                    res.data[i].content.model_name = res.data[i].name
                }
                this.model_list = this.model_list.concat(res.data);
            }
        },

        // 删除模板
        async deletModel(id, index) {
            const { data: res } = await this.$http.post(
                "launch/launch/dele_model",
                {
                    id: id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.model_list.splice(index, 1);
            }
        },

        // 添加模板
        submitForm() {
            let arr = [];
            for (let i in this.model_list) {
                if (this.model_list[i].check == true) {
                    arr.push(this.model_list[i].content);
                }
            }
            if (arr.length > this.length) {
                this.$message.error("已超出模板限制数量！");
            }else{
                this.$parent.createform.industry_list.push.apply(this.$parent.createform.industry_list,arr)
                this.resetForm()
            }
            this.$parent.sessionSave()
        },
    },
    components: {},
};
</script>


<style scoped>
.model_list{
    height: 350px;
    overflow-y: auto;
    margin: 0 -20px;
}
.model_item {
    height: 48px;
    padding: 0 20px;
}
.model_item:hover {
    background-color: rgba(68, 117, 255, 0.05);
}
.length_tips {
    margin-bottom: 10px;
}
</style>
